<template>
    <div class="wrapper">
        <!-- 菜单栏 -->
        <div class="menu pt10">
            <h3 class="title"><router-link to="/">CRM后台管理系统</router-link></h3>
            <div>
                <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    default-active="1"
                    text-color="#fff"
                    style="border-right: unset"
                >

                    <!-- 将所有菜单一起遍历传递给子组件-->
                    <MenuList :menuListData="menuListData" />

                </el-menu>
            </div>
        </div>
        <!-- 主体 -->
        <div  class="main">

            <!-- 头部 -->
            <div class="header pt10">
                <div class="header-left">
                    <div>
                        收缩按钮
                    </div>
                    <div class="ml10" style="display: flex;justify-content: center;justify-items: center;">
                        <Breadcrumb />
                    </div>
                </div>
                <div>
                    <Personal />
                </div>
            </div>

            <!-- tabs -->
            <div class="tabs mt10 pt10">
                <Tabs />
            </div>

            <!-- 内容区域 -->
            <div class="con mt10 p10">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { allApi } from '../utils/api.js'
    import MenuList  from '../components/MenuList.vue'
    import Personal  from '../components/Personal.vue'
    import Breadcrumb  from '../components/Breadcrumb.vue'
    import Tabs  from '../components/Tabs.vue'
    import {ref} from 'vue';

    const menuListData = ref([]);

    allApi.getMenuList().then(res=>{
        menuListData.value = res.data;
    })
</script>
<style lang="scss" scoped>
    .wrapper{
        width:100%;
        height: 100vh;
        background-color: #eeeeee;
        display: flex;
    }
    .menu{
        width:260px;
        height: 100vh;
        color: #fff;
        background-color: #545c64;
        .title{
            color: #fff;
            text-align: center;
            padding: 10px 0px;
        }
        overflow: scroll;
    }
    .menu::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
    .main{
        width: 100%;
        .header{
            color: #fff;
            background-color: #333;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .header-left{
                display: flex;
            }
        }
        .tabs{
            background-color: #fff;
            height: 40px;
            line-height: 40px;
        }
        .con{
            background-color: #fff;
            height: calc(100vh - 120px)/*视窗高度减去 - 头部高度 - 上下浮动10px 减去tabs 高度 = 内容区域高度*/
        }
    }
</style>